import React from 'react';

import styles from './index.module.less';

export default class NavBar extends React.Component {
  state = {
    showContent: false,
    active: '',
  };

  handleContentShow = (flag, active) => {
    this.setState({
      showContent: !!flag,
      active,
    });
  };

  render() {
    const { showContent, active } = this.state;

    return (
      <div className={styles.navBarBox}>
        <div className={styles.navBarItemBox}>
          <div className={`${styles.navBarItem} ${active === 'shopping-cart' ? styles.active : ''}`} title='购物车' onClick={this.handleContentShow.bind(this, true, 'shopping-cart')}>
            <i className='iconfont icon-gouwuche'></i>
          </div>
          <div className={`${styles.navBarItem} ${active === 'looking-history' ? styles.active : ''}`} title='浏览记录' onClick={this.handleContentShow.bind(this, true, 'looking-history')}>
            <i className='iconfont icon-zaixiankefu'></i>
          </div>
          <div className={`${styles.navBarItem}  ${active === 'online-service' ? styles.active : ''}`} title='在线客服' onClick={this.handleContentShow.bind(this, true, 'online-service')}>
            <i className='iconfont icon-zaixiankefu'></i>
          </div>
        </div>
        <div className={styles.navBarContentBox} style={{ display: showContent ? 'block' : 'none' }}>
          <div className={styles.titleBox}>
            <div className={styles.text}>
              {
                active === 'shopping-cart' && (
                  <React.Fragment>
                    <i className='iconfont icon-gouwuche'></i> 购物车
                  </React.Fragment>
                )
              }
              {
                active === 'looking-history' && (
                  <React.Fragment>
                    <i className='iconfont icon-zaixiankefu'></i> 浏览记录
                  </React.Fragment>
                )
              }
              {
                active === 'online-service' && (
                  <React.Fragment>
                    <i className='iconfont icon-zaixiankefu'></i> 在线客服
                  </React.Fragment>
                )
              }
            </div>
            <div className={styles.closeBtn} onClick={this.handleContentShow.bind(this, false, 'close')}>
              <i className='iconfont icon-guanbi'></i>
            </div>
          </div>
          <div className={styles.content}>
            {
              active === 'shopping-cart' && (
                <React.Fragment>
                  <div className={styles.shoppingCartItem}>
                    <div className={styles.goodsAvatar}>
                      <img src='https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg' alt='' />
                    </div>
                    <div className={styles.goodsBox}>
                      <div className={styles.goodsNameInfo}>
                        现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max
                      </div>
                      <div className={styles.handleBox}>
                        <span className={styles.price}>￥218.00x1</span>
                        <span className={styles.deleteBtn}>删除</span>
                      </div>
                    </div>
                  </div>
                  <div className={styles.shoppingCartItem}>
                    <div className={styles.goodsAvatar}>
                      <img src='https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg' alt='' />
                    </div>
                    <div className={styles.goodsBox}>
                      <div className={styles.goodsNameInfo}>
                        现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max
                      </div>
                      <div className={styles.handleBox}>
                        <span className={styles.price}>￥218.00x1</span>
                        <span className={styles.deleteBtn}>删除</span>
                      </div>
                    </div>
                  </div>
                  <div className={styles.shoppingCartItem}>
                    <div className={styles.goodsAvatar}>
                      <img src='https://gd2.alicdn.com/imgextra/i2/2846819868/TB2kVA8GeuSBuNjSsziXXbq8pXa_!!2846819868.jpg' alt='' />
                    </div>
                    <div className={styles.goodsBox}>
                      <div className={styles.goodsNameInfo}>
                        现货【送无线充/送延保/送壳膜】iphonex Apple/苹果 iPhone X 苹果x 苹果10全网通手机咨询购买iphonexs max
                      </div>
                      <div className={styles.handleBox}>
                        <span className={styles.price}>￥218.00x1</span>
                        <span className={styles.deleteBtn}>删除</span>
                      </div>
                    </div>
                  </div>
                </React.Fragment>
              )
            }
          </div>
        </div>
      </div>
    );
  }
}
